<!--
 @description: 登录组件
 1.宽高铺满视口
 2.使用栅格分为两部分，左边占位，右边登录表单 默认栅格各自占12 xs只有右边
 @author: macro
 @time: 2024/6/5 21:24
 -->
<template>
  <div class="loginBox">
    <el-row class="row-style">
      <!--左侧占位-->
      <el-col :span="12" :xs="0">
      </el-col>
      <!--右侧表格-->
      <el-col :span="12" :xs="24">
        <el-form
            class="loginForm"
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="ruleForm"
            :rules="rules"
            label-width="auto"
            :size="formSize"
            status-icon
        >
          <h1>Hello</h1>
          <h2>欢迎使用zero-fast快速开发平台</h2>
          <el-form-item label="账号" prop="username">
            <el-input v-model="ruleForm.username"/>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"/>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="login(ruleFormRef)">
              登录
            </el-button>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
  </div>
</template>

<script setup lang="ts">
/**---------------------------------------- 引入 -----------------------------------------------*/
import {reactive, ref} from 'vue'
import {ComponentSize, ElNotification, FormInstance, FormRules} from 'element-plus'
// 用户仓库
import useUserStore from "@/store/modules/user.ts";

let userStore = useUserStore();
// 从vue-router中引入useRoute useRouter
import {useRoute, useRouter} from "vue-router";
import {getTime} from "../../../utils/time.ts";
// 路由对象
let $route = useRoute();
//路由器对象
let $router = useRouter();

import useMenuTabs from "@/store/modules/useMenuTabs.ts";
let menuTabsStore = useMenuTabs();

/**---------------------------------------- types -----------------------------------------------*/
/*定义表单对象接口*/
interface RuleFormInterface {
  username: string
  password: string
}

/**---------------------------------------- data -----------------------------------------------*/
const formSize = ref<ComponentSize>('default');
// 表单实例对象
const ruleFormRef = ref<FormInstance>();
// 表单对象
const ruleForm = reactive<RuleFormInterface>({
  password: "111111",
  username: 'admin'
});
/**---------------------------------------- methods -----------------------------------------------*/
/**
 * @description: 自定义校验-用户名
 * @author: macro
 * @param  rule:即为校验规则对象
 * @param  value:元素文本内容
 * @param  callback:回调函数
 * @date: 2024/6/5 23:17
 */
const validatorUserName = (rule: any, value: any, callback: any) => {
  if (value.length >= 5) {
    callback();
  } else {
    callback(new Error('用户名长度不能小于5'));
  }
}
/**
 * @description: 自定义校验-密码
 * @author: macro
 * @param  rule:即为校验规则对象
 * @param  value:元素文本内容
 * @param  callback:回调函数
 * @date: 2024/6/5 23:17
 */
const validatePassword = (rule: any, value: any, callback: any) => {
  if (value.length >= 6) {
    callback();
  } else {
    callback(new Error('用户名长度不能小于6'));
  }
}
/**
 * @description: 处理登录
 * FormInstance 是一个类型，它代表了 Element Plus <el-form> 组件的实例。
 * 当你通过 ref 获取 <el-form> 组件的引用时，你会得到一个 FormInstance 类型的对象
 * @author: macro
 * @date: 2024/6/5 23:32
 * @param formRef
 */
const login = async (formRef: FormInstance | undefined) => {
  if (!formRef) return
  // 同步验证表单
  await formRef.validate(async (valid, fields) => {
    if (valid) {
      /*校验通过 请求登录*/
      //同步请求
      await userStore.userLogin(ruleForm)
      //登录后挑战：判断路由中是否有参数，有则根据参数；没有则跳转到首页
      let redirect: any = $route.query.redirect;
      //登录成功，历史菜单标签页初始化
      console.log(menuTabsStore.tabs,'--------- desc ---------')
      menuTabsStore.initTab()
      $router.push(
          {path: redirect || "/"}
      )

      //el通知
      ElNotification({
        type: 'success',
        message: '欢迎回来',
        title: `HI,${getTime()}好`
      });

    } else {
      console.log('error submit!', fields)
    }
  })
}


// 创建了一个响应式的表单验证规则对象，其中规则是基于 RuleForm 类型定义的。
// 需要注意的是，表单校验规则需要放在自定义校验方法下面
const rules = {
  username: [
    {
      required: true,
      // message: '请输入用户名',
      trigger: 'blur',
      validator: validatorUserName
    },
  ],
  password: [
    {
      required: true,
      // message: '请输入密码',
      trigger: 'blur',
      validator: validatePassword
    },
  ],

}
</script>
<style scoped lang="scss">
.loginBox {
  width: 100vw;
  height: 100vh;
  //背景图
  background-image: url("@/assets/images/background.jpg");
  background-repeat: no-repeat;
  background-size: cover;
  //其中的表单
  .loginForm {
    background-color: #7a90f1;
    position: absolute;
    top: 40vh;
    right: 25vw;
    width: 22%;
    height: 30vh;
    //圆角
    border-radius: 20px;
    padding: 30px;
    //background: url("@/assets/images/login_form.png") no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    //align-items: center;
    h1, h2, .el-form-item {
      color: #ffffff;
      margin: 10px 0;
    }

    h1 {
      font-size: 25px;
    }

    h2 {
      font-size: 18px;
    }

    .el-form-item {
      //width: 100%
    }

    .el-form-item:last-child {
      //width: 100px;
      margin-left: auto;
      margin-right: auto;
    }


  }

}

</style>
